<template>
	<view class="date-picker" @touchmove.stop.prevent="moveStop">
		<view class="picker-editor" @click="show">
			<view class="uni-date-x uni-date-single">
				<input class="uni-date__x-input" style="pointer-events: none;" type="text" v-model="selectedArea"
					:placeholder="placeholder" :disabled="true" />
			</view>
		</view>
		<view v-if="popup" class="picker-view">
				<view class="picker-inner">
						<view class="time">
								<picker-view @change="bindChange" indicatorStyle="height:80rpx;border-top:1px solid #c45e04;border-bottom:1px solid #c45e04" style="height:100%" :value="modelValue">
										<picker-view-column>
											<view class="item" v-for="(item, index) in Provinces" :key="index">{{item}}</view>
										</picker-view-column>
										<picker-view-column>
											<view class="item" v-for="(item, index) in Citys" :key="index">{{item}}</view>
										</picker-view-column>
								</picker-view>
						</view>
						<view class="btn-wrap">
								<view @click="cancelSelectArea" class="wrap-btn btn-cancel">取消</view>
								<view @click="confirmSelectArea" class="wrap-btn btn-confirm">确定</view>
						</view>
				</view>
		</view>
	</view>
</template>

<script>
import areaInfo from './js/areaInfo'
import apparentSolarTime from '@/components/area-picker/js/apparentSolarTime'

export default {
	data() {
		return {
			Provinces: [],
			Citys: [],
			popup: false,
			selectedArea: '',
			modelValue: []
		}
	},
	props: {
		value: {
			type: [String, Number, Array, Date],
			default: []
		},
    placeholder: {
			type: String,
			default: ''
    }
	},
	watch: {
		value: {
			immediate: true,
			handler(newVal, oldVal) {
				// 赋值为当前时间
				if (newVal.length === 0) {
					this.modelValue = [0, 0];
				}
			}
		}
	},
	methods: {
		bindChange(e) {
			let value = e.detail.value;
			let proviceName = this.Provinces[value[0]];
			let arr = [];
			for (let e = 0; e < areaInfo[proviceName].length; e++) {
				arr.push(areaInfo[proviceName][e].name);
			}
			this.Citys = arr
			this.modelValue = [value[0], value[1]]
		},
		moveStop() {
			
		},
		show() {
			this.popup = true
		},
		setEmit(modelValue) {
			this.$emit('change', modelValue)
			this.$emit('input', modelValue)
			// this.$emit('update:value', modelValue)
		},
		confirmSelectArea() {
			this.setEmit(this.modelValue)
			// 获取选择日期
			this.selectedArea = this.areaToString(this.modelValue)
			this.popup = false
		},
		cancelSelectArea() {
			this.popup = false
		},
		initPicker(newVal) {
			
		},
		areaToString(arr) {
			let proviceName = this.Provinces[arr[0]]; 
			let cityName = this.Citys[arr[1]];
			return `${proviceName}-${cityName}`
		},
		// 真太阳时换算
		solarTimeCalc(year, month, day, hour, minute) {
			let date = year + "-" + (month > 9 ? month : '0'+month) + "-" + (day > 9 ? day : '0'+day) + " " + (hour > 9 ? hour : '0'+hour) + ":" + (minute > 9 ? minute : '0'+minute);
			let province = this.Provinces[this.modelValue[0]];
			let city = this.Citys[this.modelValue[1]];
			if ("其他国家/地区" != province) {
				let lat = 0;
				let lng = 0;
				for (var h = 0; h < areaInfo[province].length; h++){
					if (areaInfo[province][h].name == city) {
						lat = areaInfo[province][h].lat, lng = areaInfo[province][h].lng;
						break;
					}
				};
	
				let solarTime = function(a, n) {
					var l = (a += ":00").split(" "),
						t = l[0].split("-");
					l = l[1].split(":");
					parseInt(t[0]);
					var e, g = parseInt(t[1]),
						m = parseInt(t[2]);
					parseInt(l[0]), parseInt(l[1]);
					e = apparentSolarTime[g + "-" + m];
					var s = n - 120,
						i = Math.trunc(238 * s + e);
					a = (a = a.substring(0, 19)).replace(/-/g, "/");
					var r = new Date(a).getTime() + 1e3 * i,
						o = new Date(r);
					return a = function(a) {
						var n = new Date(a),
							l = n.getFullYear(),
							t = n.getMonth() + 1,
							e = n.getDate(),
							g = n.getHours(),
							m = n.getMinutes();
						n.getSeconds();
						return l + "-" + (t < 10 ? "0" + t : t) + "-" + (e < 10 ? "0" + e : e) + " " + (g <
							10 ? "0" + g : g) + ":" + (m < 10 ? "0" + m : m);
					}(o);
				}(year + "-" + month + "-" + day + " " + hour + ":" + minute, lng);
	
				return solarTime
			}
			return date
			
			// this.suntime = solarTime
			// this.solartime = date

			// } else {
			// 	var d = n + "-" + (l < 10 ? "0" + l : l) + "-" + (t < 10 ? "0" + t : t) + " " + (this.hour < 10 ?
			// 		"0" + this.hour : this.hour) + ":" + (this.minute < 10 ? "0" + this.minute : this.minute);

			// 	this.showAreaPickerView = !1
			// 	this.selectedArea = "其他国家/地区-北京时间"
			// 	this.lat = 39
			// 	this.lng = 120
			// 	this.suntime = d
			// 	this.solartime = d
			// }
		}
	},
  created() {
		// 地域数据
		let areaList = [];
		for (let ele in areaInfo) {
			areaList.push(ele);
		}
		// 初始城市数据
		let cityList = [];
		for (let u = 0; u < areaInfo["其他国家/地区"].length; u++) {
			cityList.push(areaInfo["其他国家/地区"][u].name);
		}
		this.Provinces = areaList
		this.Citys = cityList
  }
}
</script>

<style lang="scss" scoped>
.date-picker {
	width: 100%;
}
/* 弹出框 */
.picker-view {
	background-color: rgba(0,0,0,.6);
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 960px;
	z-index: 1000;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	left: var(--window-left);
}

.picker-view.show {
	visibility: visible;
}
.picker-editor {
	::v-deep .uni-date__x-input {
		font-size: 28rpx;
	}
}

.picker-view .picker-inner {
	background-color: #fff;
	display: block;
	font-size: 30rpx;
	text-align: center;
	width: 100%;
}

.picker-view .picker-inner .time {
	display: block;
	height: 400rpx;
	padding: 20rpx;
	position: relative;
}

.picker-view .picker-inner .time.show {
	display: block;
}

.picker-view .picker-inner .type {
	border-top: 1rpx solid #eee;
	height: 80rpx;
}

.picker-view .picker-inner .btn-wrap {
	padding: 1.4rem;
	display: flex;
	justify-content: space-between;
}
.wrap-btn {
	border: 1px solid #c45e04;
	border-radius: 8rpx;
	width: 100%;
	font-size: 32rpx;
	line-height: 64rpx;
}
.btn-cancel {
	color: #c45e04;
	background-color: #fff;
}
.btn-confirm {
  margin-left: 48rpx;
	color: #fff;
	background-color: #c45e04;
}
.picker-view .picker-inner .btns .confirm {
	width: 409rpx;
	height: 71rpx;
	color: #fff;
	margin: 0 auto;
	font-size: 43rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.item {
	height: 80rpx;
	line-height: 80rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
}
</style>
